<template>
	<!-- 分销中心界面 -->
	<view class="dirst">
		<!-- <x-navtitle text='<个人中心'></x-navtitle> -->
		<view class="dirst_topbar"> </view>
		<!-- 内容区域 -->
		<view class="dirst_content">
			<!-- 顶部头像区域 -->
			<view class="dirst_top_uname d-flex-yCenter-sb">
				<view class="d-flex-yCenter">
					<image :src="headimg" mode=""></image>
					<text>{{username}}</text>
				</view>
				<view class="dirst_img d-flex-yCenter-ju" @click="Specify">
					我的分销码
				</view>
			</view>
			<!-- 我的业绩 -->
			<view class="dirst_performance ">
				<view class="" style="margin-bottom: 30rpx;">
					我的业绩
				</view>
				<view class="d-flex-yCenter-sb" style="flex-wrap: wrap;">
					<view class="box-shadow"
						style="width: 300rpx; padding: 20rpx 0rpx 48rpx 22rpx;margin-bottom: 20rpx; "
						v-for="(item,index) in yejiList" :key="index">
						<view class="" style="margin-bottom: 30rpx;">
							{{item.name}}
						</view>
						<view class="color_yello">
							{{item.prince}}
						</view>
					</view>
				</view>
			</view>
			<!-- 提现余额 佣金明细 我的团队 -->
			<view class="all_mony_details"
				style="background: #FFFFFF;border-radius: 6px 6px 0px 0px;padding: 0rpx 30rpx 0rpx 20rpx;">
				<view class="d-flex-yCenter-sb" style="padding: 20rpx  0rpx;" v-for="(item,index) in boss_mony_detail"
					@click="mony_detail(index)" :key="index">
					<view class="d-flex-yCenter">
						<image :src="item.icon" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="d-flex-yCenter  right_icon">
						<text class="color_yello" style="margin-right: 22rpx;">{{item.mony}}</text>
						<image :src="item.iconRight" mode="" style="	width: 14rpx;
					height: 24rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// 已完结： 我的业绩的累计总佣金    已提现金额  我的团队     提现余额   
	// 未完结:  我的分销码


	// 提现总金额
	import {
		withdraw_total
	} from '@/config/apiRouter.js'
	// 获取团队的一级人数 二级人数   已完结
	import {
		friends_total
	} from '@/config/apiRouter.js'
	// 获取个人信息
	import {
		userInfo
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				headimg: '', // 头像
				username: '', //昵称
				bossmonydetail: '', //提现余额
				withdraw: '', //已提现金额
				indexNav: {
					Rotation: [],
					title: '分销商城',
					iconPath: '@/static/icon/left.png'
				}, // 首页轮播/背景图配置
				yejiList: [{
						name: '累计总佣金（元）',
						prince: 0
					},
					{
						name: '已提现金额（元）', // 提现总金额
						prince: 0,
					},
					{
						name: '我的团队（人）',
						prince: 0
					},
				],
				boss_mony_detail: [{
						icon: '../../static/icon/monys.png',
						name: '提现余额',
						mony: '',
						iconRight: '../../static/icon/right_jian.png'
					},
					{
						icon: '../../static/icon/monys-detail.png',
						name: '佣金明细',
						mony: '',
						iconRight: '../../static/icon/right_jian.png'
					},
					{
						icon: '../../static/icon/all.png',
						name: '我的团队',
						mony: '',
						iconRight: '../../static/icon/right_jian.png'
					},
				]
			}
		},
		watch: {
			// 监视计算总佣金
			bossmonydetail(value) {
				console.log(value, 'watch')
				if (this.bossmonydetail != '' && this.withdraw != '') {
					this.yejiList[0].prince = (this.bossmonydetail * 1) + (this.withdraw * 1);
				}
			},
		},
		onShow() {
			// 提现总金额	
			this.withdrawtotal();
			this.friendstotal() // 获取团队的一级人数 二级人数  已完结
			this.userInfoview(); //	// 获取个人信息
		},
		methods: {
			// 获取团队的一级人数 二级人数  已完结
			friendstotal() {
				friends_total().then(res => {
					console.log(res, '团队的一级人数 二级人数')
					this.yejiList[2].prince = (res.data.rec_num1) * 1 + (res.data.rec_num2) * 1 //.	一级人数 
				})
			},
			// 我的分销码
			Specify() {
				uni.navigateTo({
					url: '../DistributionYards/DistributionYards'
				})
			},
			mony_detail(index) {
				switch (index) {
					case 0:
						uni.navigateTo({
							url: '../commission/commission'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '../commission/commission'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '../myGroup/myGroup'
						})
						break;
					default:
						break;
				}
			},
			// 已提现金额
			withdrawtotal() {
				withdraw_total().then(res => {
					this.yejiList[1].prince = res.data;
					this.withdraw = res.data;
					console.log(res, '已提现金额')
				})
			},
			// 获取用户信息
			userInfoview() {
				userInfo().then(res => {
					this.username = res.data.username;
					this.headimg = res.data.headimg;
					this.boss_mony_detail[0].mony = res.data.money;
					this.bossmonydetail = res.data.money; //没提现余额
					console.log(res, '获取用户的信息')
				})
			}
		}
	}
</script>

<style lang="scss">
	.dirst {
		.color_yello {
			color: #FF890B;
		}

		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #F5F5F5;

		.dirst_topbar {
			height: 88rpx;
			background-color: #FF890B;
			border-radius: 0px 0px 100% 100%;
			position: relative;
		}

		.dirst_content {
			margin: -60rpx 30rpx 0rpx;
			// height: 400rpx;
			// border: 1px solid #000000;
			position: relative;
			z-index: 99;
		}

		.dirst_top_uname {
			// height: 160px;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 32rpx;
			}

			.dirst_img {
				// width: 150rpx;
				padding: 14rpx 18rpx;
				// height: 50rpx; 
				color: #FFFFFF;
				background-color: #FF890B;
				border-radius: 26rpx;
			}
		}

		// 我的业绩
		.dirst_performance {
			padding: 20rpx 30rpx 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
		}

		.all_mony_details {
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 14rpx;
			}

			.right_icon {
				image {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}
	}
</style>
